<template>
	<view>	
		<container style="margin-top: 10px;">
			<ls-swiper :list="base_lsit" imgKey="imgUrl" :loop="true" :dots='true' :autoplay='true' :height="200"
			 @clickItem="clickItem()" />
		</container>
		
		<view v-if="hot_1 && hot_1.length>0" class="jiangqie-news-view jiangqie-news-hot">
			<view class="jiangqie-news-type">
				鉴真茶/专业鉴茶师 权威认证<text>滑动查看</text>
			</view>
			<scroll-view class="jiangqie-news-scroll-x-box" scroll-x="true">
				<view v-for="(item, index) in hot_1" :key="index" class="jiangqie-hot-scroll-box"
					:data-id="item.id" @tap.stop="handlerArticleClick">
					<image :src="item.thumbnail" mode="aspectFill" class="jiangqie-hot-scroll-image">
					</image>
					<view class="jiangqie-hot-scroll-title">{{item.title}}</view>
				</view>
			</scroll-view>
		</view>
		
		<view v-if="hot_2 && hot_2.length>0" class="jiangqie-news-view jiangqie-news-hot">
			<view class="jiangqie-news-type">
				鉴茶种，估价值/为您答疑解惑<text>滑动查看</text>
			</view>
			<scroll-view class="jiangqie-news-scroll-x-box" scroll-x="true">
				<view v-for="(item, index) in hot_2" :key="index" class="jiangqie-hot-scroll-box"
					:data-id="item.id" @tap.stop="handlerArticleClick">
					<image :src="item.thumbnail" mode="aspectFill" class="jiangqie-hot-scroll-image">
					</image>
					<view class="jiangqie-hot-scroll-title">{{item.title}}</view>
				</view>
			</scroll-view>
		</view>
		
		<view v-if="hot_3 && hot_3.length>0" class="jiangqie-news-view jiangqie-news-hot">
			<view class="jiangqie-news-type">
				专业鉴茶师，权威认证/平台所拥有的证书<text>滑动查看</text>
			</view>
			<scroll-view class="jiangqie-news-scroll-x-box" scroll-x="true">
				<view v-for="(item, index) in hot_3" :key="index" class="jiangqie-hot-scroll-box"
					:data-id="item.id" @tap.stop="handlerArticleClick">
					<image :src="item.thumbnail" mode="aspectFill" class="jiangqie-hot-scroll-image">
					</image>
					<view class="jiangqie-hot-scroll-title">{{item.title}}</view>
				</view>
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
	import container from '@/components/container/index.vue'
	import LsSwiper from '@/components/ls-swiper/index.vue'
	
	export default {
		components: {
			container,
			LsSwiper
		},
		data() {
			return {
				base_lsit: [{
					imgUrl: "https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/baike/pic/item/c83d70cf3bc79f3d2f4e395eb8a1cd11728b2935.jpg",
					name: "1"
				},
				{
					imgUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fteabrand.cn%2Fd%2Ffile%2Fp%2F20161129%2Frgjj3ovaksr.jpg&refer=http%3A%2F%2Fteabrand.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627734023&t=3d0bedbf512dfa284961e60ef4eec3ab",
					name: "1"
				},
				{
					imgUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.furenjjf.cn%2Fdata%2Fupload%2Fimage%2F20190220%2F1550632282707268.jpg&refer=http%3A%2F%2Fwww.furenjjf.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627734068&t=0ad20f50f35ee5e823a317ffb63cd41a",
					name: "1"
				}],
				
				hot_1: [{
					id: 1294,
					thumbnail: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190818%2F6eb0f3a67cf043839b0700efee3c6af3.JPG&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627734383&t=a18d8e6133d4e80905354ccecac48693",
					title: "品质鉴定"
				},{
					id: 1294,
					thumbnail: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-7353fac3ccf5bedb4de05a1ac0f1e8bd_1440w.jpg%3Fsource%3D172ae18b&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627779266&t=6460e2862ac3be412930a90ddf714e78",
					title: "寄茶"
				},
				{
					id: 1294,
					thumbnail: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffinance.people.com.cn%2FNMediaFile%2F2018%2F0514%2FMAIN201805141426538651382932325.jpg&refer=http%3A%2F%2Ffinance.people.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627779367&t=21310c22a098903d32c9d4a094d800f2",
					title: "扫一扫识别种"
				}],
				
				hot_2: [{
					id: 1294,
					thumbnail: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqqpublic.qpic.cn%2Fqq_public%2F0%2F0-2682277435-649ACA8BB44C8E46C7275482F6138E7F%2F0%3Ffmt%3Djpg%26size%3D59%26h%3D534%26w%3D800%26ppv%3D1.jpg&refer=http%3A%2F%2Fqqpublic.qpic.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627779939&t=d67208598ea7237f077cfaabcd802c46",
					title: "价值多少"
				},{
					id: 1294,
					thumbnail: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2F08imgmini.eastday.com%2Fmobile%2F20191217%2F20191217200000_80a73afc20abb200d8243ffbbf355458_2.jpeg&refer=http%3A%2F%2F08imgmini.eastday.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627779506&t=6637e0de19ead0236e72dc8b81bac7a9",
					title: "老茶新茶"
				},{
					id: 1294,
					thumbnail: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.36zs.com%2Fwp-content%2Fuploads%2F2019%2F12%2Fc5b9c4d21c1c9f5.jpg&refer=http%3A%2F%2Fimg.36zs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627734987&t=9e2a6935ee11093068991a1f7a85b2c4",
					title: "鉴别茶叶品种"
				}],
				
				hot_3: [{
					id: 1294,
					thumbnail: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.thea.cn%2FPublic%2FUploadpic%2F20200518%2F1589773644.jpg&refer=http%3A%2F%2Fpic.thea.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627779626&t=936a99177b558a48d853bd79e05af5e7",
					title: "专业茶师"
				},{
					id: 1294,
					thumbnail: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.cxtuku.com%2F00%2F07%2F14%2Fb9885c3f9ee1.jpg&refer=http%3A%2F%2Fpic1.cxtuku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627780069&t=e9331ba5316b5a5e3e130db5204b9794",
					title: "权威认证"
				}]
			};
		},
		methods: {
			clickItem(data) {
				console.log(data)
			},
			
			handlerArticleClick: function(e) {
				let post_id = e.currentTarget.dataset.id;
				// uni.navigateTo({
				// 	url: '/pages/article/article?post_id=' + post_id
				// });
				console.log(post_id)
			},
		}
	}
</script>

<style lang="scss">
	.index{
		padding: 30rpx;
	}
	
	.jiangqie-logo {
		display: flex;
		align-items: center;
		margin-right: 15rpx;
		
		image {
			height: 48rpx;
			width: 128rpx;
		}
	}
	
	.jiangqie-btn-search {
		display: flex;
		align-items: center;
		width: 80%;
		height: 32px;
		padding-left: 20rpx;
		background: #d5544f;
		border-radius: 16px;
		color: #f8b8b8;
		font-size: 28rpx;
	}
	
	.container {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding-bottom: env(safe-area-inset-bottom);
		background: #FFF;
	}
	
	.jiangqie-top-bg {
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position-y: 100rpx;
	}
	
	/*banner*/
	
	.jiangqie-banner-box {
		width: 100%;
	}
	
	.jiangqie-banner-swiper {
		width: 100%;
		height: 320rpx;
	}
	
	.jiangqie-banner-item {
		padding: 0 16rpx;
		box-sizing: border-box;
	}
	
	.jiangqie-slide-image {
		width: 100%;
		height: 320rpx;
		display: block;
		border-radius: 20rpx;
		transition: all 0.1s linear;
		box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.2);
	}
	
	.jiangqie-banner-scale {
		transform: scaleY(0.9);
		transform-origin: center center;
	}
	
	.jiangqie-banner-swiper .wx-swiper-dot {
		width: 8rpx;
		height: 8rpx;
		display: inline-flex;
		background: none;
		justify-content: space-between;
	}
	
	.jiangqie-banner-swiper .wx-swiper-dot::before {
		content: '';
		flex-grow: 1;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 16rpx;
		overflow: hidden;
	}
	
	.jiangqie-banner-swiper .wx-swiper-dot-active::before {
		background: #FFF;
	}
	
	.jiangqie-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
		width: 16rpx;
	}
	
	
	/** jiangqie-news-icon **/
	.jiangqie-news-icon {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		font-size: 24rpx;
		color: #555;
		margin-top: 10rpx;
	}
	
	.jiangqie-news-iconbox {
		width: 25%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		margin-bottom: 10rpx;
	}
	
	.jiangqie-news-iconimg {
		height: 100rpx;
		width: 100rpx;
		border-radius: 16rpx;
	}
	
	.jiangqie-news-iconbox text {
		line-height: 46rpx;
	}
	
	/** jiangqie-news-lightbox **/
	.jiangqie-news-view {
		overflow: hidden;
		padding: 0 30rpx;
	}
	
	.jiangqie-news-lightbox {
		margin-bottom: 20rpx;
		float: left;
		position: relative;
		border-radius: 20rpx;
	}
	
	.jiangqie-news-lightbox-main {
		height: 300rpx;
		width: 320rpx;
		background: linear-gradient(to right bottom, #7FD3FF, #2BB1F2);
		box-shadow: 5rpx 5rpx 20rpx rgba(0, 0, 0, 0.2);
	}
	
	.jiangqie-news-lightbox-side,
	.jiangqie-news-lightbox-side2 {
		height: 141rpx;
		width: 350rpx;
		text-align: left;
		margin-left: 20rpx;
		background: linear-gradient(to right bottom, #9788FF, #735CFF);
		box-shadow: 5rpx 5rpx 20rpx rgba(0, 0, 0, 0.2);
	}
	
	.jiangqie-news-lightbox-side2 {
		background: linear-gradient(to right bottom, #FF91C2, #FF539E);
	}
	
	.jiangqie-news-lightimg {
		height: 300rpx;
		width: 320rpx;
		border-radius: 20rpx;
	}
	
	.jiangqie-news-lightbox-side .jiangqie-news-lightimg,
	.jiangqie-news-lightbox-side2 .jiangqie-news-lightimg {
		height: 141rpx;
		width: 350rpx;
		position: relative;
	}
	
	
	.jiangqie-news-lighttext {
		position: absolute;
		left: 0rpx;
		bottom: 0rpx;
		text-align: left;
		background: rgba(0, 0, 0, 0.3);
		overflow: hidden;
		z-index: 9;
		width: 280rpx;
		border-radius: 0 0 20rpx 20rpx;
		height: 60rpx;
		padding: 0 20rpx;
	}
	
	.jiangqie-news-lightbox-side .jiangqie-news-lighttext,
	.jiangqie-news-lightbox-side2 .jiangqie-news-lighttext {
		width: 310rpx;
	}
	
	.jiangqie-news-lihgttitle {
		color: #FFF;
		font-size: 26rpx;
		font-weight: 300;
		line-height: 70rpx;
	}
	
	
	/** jiangqie-news-block **/
	
	.jiangqie-news-type {
		font-size: 36rpx;
		font-weight: 500;
		color: #555;
		padding: 16rpx 0 0;
	}
	
	.jiangqie-news-type text {
		float: right;
		font-size: 24rpx;
		font-weight: 200;
		color: #999;
		margin-right: 30rpx;
	}
	
	.jiangqie-news-block {
		position: relative;
		padding: 30rpx 0;
		min-height: 160rpx;
		border-bottom: 1rpx solid #DDD;
		padding-right: 260rpx;
	}
	
	.jiangqie-news-block:last-child {
		border: none;
	}
	
	.jiangqie-news-stick-image {
		position: absolute;
		height: 60rpx;
		width: 60rpx;
		left: 0rpx;
		top: 0rpx;
	}
	
	.jiangqie-news-image {
		float: right;
		height: 160rpx;
		width: 240rpx;
		margin-right: -260rpx;
		border-radius: 20rpx;
		box-shadow: 5rpx 5rpx 20rpx rgba(0, 0, 0, 0.2);
	}
	
	.jiangqie-news-text {
		text-align: left;
	}
	
	.jiangqie-news-title {
		font-size: 32rpx;
		color: #333;
		font-weight: 400;
		line-height: 50rpx;
		/* margin-bottom: 30rpx; */
		/* height: 100rpx; */
		overflow: hidden;
	}
	
	.jiangqie-news-no-excerpt {
		margin-bottom: 30rpx;
		height: 100rpx;
	}
	
	.jiangqie-news-describe {
		font-size: 26rpx;
		color: #999;
		line-height: 30rpx;
		margin-bottom: 18rpx;
	}
	
	.jiangqie-news-info {
		font-size: 22rpx;
		color: #BBB;
		vertical-align: bottom;
		height: 26rpx;
	}
	
	.jiangqie-news-cmt {
		float: right;
		padding-right: 4rpx;
	
	}
	
	.jiangqie-news-cmt image {
		vertical-align: middle;
		height: 24rpx;
		width: 24rpx;
		margin-right: 8rpx;
		border-radius: 10rpx;
	}
	
	.jiangqie-news-tag {
		float: left;
		line-height: 32rpx;
		height: 30rpx;
		padding: 0 16rpx;
		border: 1rpx solid #AAA;
		border-radius: 26rpx;
		margin-right: 12rpx;
	}
	
	.jiangqie-news-time {
		float: left;
		line-height: 30rpx;
		height: 30rpx;
		vertical-align: middle;
		padding-left: 10rpx;
	}
	
	.image-wide {
		padding-right: 0;
	}
	
	.image-wide .jiangqie-news-image {
		height: 320rpx;
		width: 690rpx;
		margin-right: 0rpx;
		margin-bottom: 10rpx;
		clear: both;
		float: none;
	}
	
	.image-wide .jiangqie-news-title {
		height: auto;
		margin-bottom: 10rpx;
	}
	
	.jiangqie-news-hot {
		padding: 10rpx 0;
		border-bottom: 12rpx solid #F3F3F3;
		border-top: 12rpx solid #F3F3F3;
	}
	
	.jiangqie-news-hot .jiangqie-news-type {
		padding-left: 30rpx;
		padding-bottom: 20rpx;
	}
	
	.jiangqie-news-scroll-x-box {
		height: 290rpx;
		white-space: nowrap;
	}
	
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}
	
	.jiangqie-hot-scroll-box {
		width: 750rpx;
		height: 290rpx;
		margin-left: 20rpx;
		display: inline-block;
	}
	
	.jiangqie-hot-scroll-box:first-child {
		margin-left: 30rpx;
	}
	
	.jiangqie-hot-scroll-box:last-child {
		margin-right: 30rpx;
	}
	
	.jiangqie-hot-scroll-image {
		width: 700rpx;
		height: 220rpx;
		border-radius: 16rpx;
		box-shadow: 5rpx 5rpx 20rpx rgba(0, 0, 0, 0.2);
		margin-bottom: 10rpx;
	}
	
	.jiangqie-hot-scroll-title {
		font-size: 32rpx;
		color: #333;
		font-weight: 400;
		line-height: 36rpx;
		height: 36rpx;
		white-space: normal;
		overflow: hidden;
	}
	
	.tab-more {
		position: fixed;
		right: 0;
		height: 100rpx;
		width: 120rpx;
		z-index: 99;
	}
	
	.tab-more image {
		height: 100rpx;
		width: 120rpx;
	}
	
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}
	
	.tab-view::before {
		content: '';
		position: absolute;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 0;
	}
	
	.tab-view {
		width: 100%;
		height: 100rpx;
		overflow: hidden;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		z-index: 99;
		background: #E0301F;
		white-space: nowrap;
	}
	
	.tab-bar-item {
		padding: 0;
		height: 100rpx;
		min-width: 80rpx;
		line-height: 100rpx;
		margin: 0 28rpx;
		display: inline-block;
		text-align: center;
		box-sizing: border-box;
	}
	
	.tab-bar-title {
		height: 100rpx;
		line-height: 100rpx;
		font-size: 28rpx;
		color: rgb(248, 184, 184);
		font-weight: 300;
	}
	
	.active {
		border-bottom: 6rpx solid #FFF;
	}
	
	.active .tab-bar-title {
		color: #FFF !important;
		font-size: 32rpx;
		font-weight: bold;
	}
	
	/*tabbar end*/
	
	.jiangqie-news-title text {
		font-size: 22rpx;
		font-weight: 300;
		color: #FFF;
		background: #F30;
		float: left;
		width: 60rpx;
		height: 36rpx;
		margin-top: 6rpx;
		line-height: 36rpx;
		text-align: center;
		border-radius: 8rpx;
		margin-right: 12rpx;
	}
</style>
